<template>
	<view class="payment-code-container" :style="containerStyle">
		<!-- 背景装饰 -->
		<view class="animated-bg">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
		</view>

		<!-- 导航栏 -->
		<u-navbar
			:is-back="true"
			title="收钱"
			:title-bold="true"
			:is-fixed="false"
			:border-bottom="false"
			:back-icon-color="'#fff'"
			:background="{ background: 'rgba(255,170,0,1)' }"
			:title-color="'#fff'"
		/>

		<!-- 主要内容区 -->
		<view class="content-wrapper" :class="{'content-wrapper-animate': showContent}">
			<!-- 标题区域 -->
			<view class="header">
				<view class="header-icon-wrapper">
					<u-icon name="rmb-circle" color="#ffaa00" size="30" />
				</view>
				<text class="header-text">经营收钱</text>
			</view>

			<!-- 二维码区域 -->
			<view class="qr-section">
				<view class="merchant-info">
					<text class="merchant-name">{{ info.name }}</text>
					<view class="merchant-type">
						<u-icon name="checkmark-circle" color="#52c41a" size="24" />
						<text class="type-text">经营收款码</text>
					</view>
				</view>
				
				<view class="qr-wrapper" ref="qr-image" :class="{'qr-wrapper-animate': showQR}">
					<template v-if="loading">
						<view class="loading-wrapper">
							<u-loading mode="circle" color="#ffaa00" size="36" />
							<text class="loading-text">加载中...</text>
						</view>
					</template>
					<template v-else-if="error">
						<view class="error-wrapper">
							<u-icon name="error-circle" color="#ff4d4f" size="48" />
							<text class="error-text">{{ error }}</text>
						</view>
					</template>
					<template v-else>
						<tki-qrcode
							v-if="showCode"
							ref="qrcode"
							uni="px"
							:val="code"
							:size="320"
							:showLoading="false"
						/>
					</template>
				</view>
				<view class="qr-tip-wrapper">
					<u-icon name="scan" color="#ffaa00" size="24" />
					<text class="qr-tip">请让顾客扫描二维码完成支付</text>
				</view>
			</view>

			<!-- 收款记录入口 -->
			<router-link to="/bundle/pages/bill/bill?source=1">
				<view class="record-entry">
					<view class="entry-left">
						<u-icon name="order" class="entry-icon" />
						<text class="entry-text">收款记录</text>
					</view>
					<u-icon name="arrow-right" class="entry-arrow" />
				</view>
			</router-link>
		</view>

		<!-- 底部安全提示 -->
		<view class="safety-tip">
			<u-icon name="lock" color="#fff" size="24" />
			<text class="tip-text">安全支付，放心收款</text>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from "vuex";
	import { apiPayCode } from "@/api/user.js"
	export default {
		name: 'PaymentCode',
		data() {
			return {
				code: "",
				image: "",
				localLogo: "",
				showCode: false,
				windowWidth: null,
				windowHeight: null,
				info: '',
				loading: false,
				error: "",
				showContent: false,
				showQR: false
			}
		},
		computed: {
			containerStyle() {
				return {
					width: `${this.windowWidth}px`,
					height: `${this.windowHeight}px`
				};
			}
		},
		onLoad() {
			this.initializePage();
			// 添加进入动画
			setTimeout(() => {
				this.showContent = true;
				setTimeout(() => {
					this.showQR = true;
				}, 300);
			}, 100);
		},
		methods: {
			...mapActions(["getUser"]),
			async initializePage() {
				try {
					this.loading = true;
					this.error = "";
					await Promise.all([
						this.getPayCode(),
						this.getUserInfo()
					]);
				} catch (error) {
					this.handleError(error);
				} finally {
					this.loading = false;
				}
			},
			async getPayCode() {
				try {
					const res = await apiPayCode();
					this.code = res.code;
					this.image = res.logo;
					await this.downloadLogo();
					this.showCode = true;
					this.error = "";
				} catch (error) {
					throw new Error('获取支付码失败');
				}
			},
			async downloadLogo() {
				if (!this.image) return;
				
				try {
					const downloadTask = uni.downloadFile({
						url: this.image,
						success: (res) => {
							if (res.statusCode === 200) {
								this.localLogo = res.tempFilePath;
							} else {
								console.error('下载logo失败:', res);
								this.localLogo = '/static/images/default-logo.png';
							}
						},
						fail: (error) => {
							console.error('下载logo失败:', error);
							this.localLogo = '/static/images/default-logo.png';
						}
					});

					// 监听下载进度
					downloadTask.onProgressUpdate((res) => {
						console.log('下载进度:', res.progress);
					});
				} catch (error) {
					console.error('下载logo失败:', error);
					this.localLogo = '/static/images/default-logo.png';
				}
			},
			async getUserInfo() {
				try {
					const userInfo = await this.getUser();
					this.info = JSON.parse(JSON.stringify(userInfo));
				} catch (error) {
					throw new Error('获取用户信息失败');
				}
			},
			initSystemInfo() {
				try {
					const res = uni.getSystemInfoSync();
					this.windowWidth = res.windowWidth;
					this.windowHeight = res.windowHeight;
				} catch (error) {
					console.error('获取系统信息失败:', error);
				}
			},
			handleError(error) {
				this.error = error.message || '加载失败，请重试';
				uni.showToast({
					title: this.error,
					icon: 'none',
					duration: 2000
				});
			}
		},
		mounted() {
			this.initSystemInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.payment-code-container {
		background-color: #ffaa00;
		min-height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.animated-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 0;

		.circle {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.1);
			
			&-1 {
				width: 300rpx;
				height: 300rpx;
				top: -100rpx;
				right: -100rpx;
			}
			
			&-2 {
				width: 200rpx;
				height: 200rpx;
				bottom: 20%;
				left: -50rpx;
			}
		}
	}

	.content-wrapper {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		min-height: 740rpx;
		position: relative;
		padding-bottom: 100rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		opacity: 0;
		transform: translateY(20rpx);
		transition: all 0.5s ease-out;
		z-index: 1;

		&-animate {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.header {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px dashed #d3d3d3;

		&-icon-wrapper {
			background: rgba(255, 170, 0, 0.1);
			padding: 10rpx;
			border-radius: 50%;
		}

		&-text {
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.qr-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		min-height: 460rpx;

		.merchant-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;
		}

		.merchant-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.merchant-type {
			display: flex;
			align-items: center;
			background: rgba(82, 196, 26, 0.1);
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
			
			.type-text {
				margin-left: 8rpx;
				font-size: 24rpx;
				color: #52c41a;
			}
		}
	}

	.qr-wrapper {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		min-height: 360rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		transform: scale(0.95);
		transition: all 0.3s ease-out;

		&-animate {
			opacity: 1;
			transform: scale(1);
		}
	}

	.qr-tip-wrapper {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		
		.qr-tip {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.loading-wrapper,
	.error-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.loading-text,
	.error-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	.error-text {
		color: #ff4d4f;
		margin-bottom: 20rpx;
	}

	.record-entry {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-top: 1px solid #f5f5f5;
	}

	.entry-left {
		display: flex;
		align-items: center;
	}

	.entry-icon {
		margin-right: 20rpx;
	}

	.entry-text {
		font-size: 28rpx;
		color: #333;
	}

	.entry-arrow {
		color: #999;
	}

	.safety-tip {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		z-index: 1;

		.tip-text {
			margin-left: 10rpx;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
</style>
